<template>
  <div class="itemmusiclist">
    <div class="itemmusiclist-top">
      <van-row>
        <van-col span="3">
          <span class="iconfont" style="font-size: 0.5rem">&#xe7f9;</span>
        </van-col>
        <van-col span="9">
          <div class="itemmusiclist-top-left-da">播放全部</div>
          <div class="itemmusiclist-top-left-xiao">(共{{ state.songs.length }}篇)</div>
        </van-col>
        <van-col span="9" offset="3">
          <div class="itemmusiclist-top-right">
            <div class="iconfont" style="font-size: 0.4rem; line-height: 0.8rem; padding: 0rem 0.05rem 0rem 0.1rem">
              &#xe676;
            </div>
            <div class="itemmusiclist-top-right-text">收藏 ({{ subscribed(playlist.subscribedCount) }})</div>
          </div>
        </van-col>
      </van-row>
    </div>
    <van-list
      v-model:loading="state.loading"
      :finished="state.finished"
      finished-text="没有更多了"
      @load="onLoad"
      class="itemmusiclist-list">
      <!-- <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> -->
      <div v-for="(song, index) in state.songs" :key="song" :title="song" class="itemmusiclist-bottom">
        <van-row>
          <van-col span="3" class="itemmusiclist-bottom-index" @click="songdata(index)">
            {{ index + 1 }}
          </van-col>
          <van-col span="15" @click="songdata(index)">
            <div class="itemmusiclist-bottom-song">{{ song.name }}</div>
            <div class="itemmusiclist-bottom-name">
              <span v-for="arname in song.ar" :key="arname">
                {{ arname.name + "、" }}
              </span>
            </div>
          </van-col>
          <van-col span="3">
            <div v-if="song.mv != 0" class="iconfont" style="font-size: 0.6rem">&#xe679;</div>
          </van-col>
          <van-col span="3">
            <div class="iconfont" style="font-size: 0.6rem">&#xe65f;</div>
          </van-col>
        </van-row>
      </div>
    </van-list>
  </div>
</template>

<script>
import { useRoute } from "vue-router";
import { reactive, onMounted, watch } from "vue";
import { useStore } from "../../stores/index";

import { getsongs } from "../../api/user";

export default {
  setup(props) {
    const store = useStore();
    const state = reactive({
      songs: {},
      //const list = ref([]);
      loading: false,
      finished: false,
      offset: 0,
      id: null,
      son: {},
    });
    onMounted(() => {
      state.id = useRoute().query.id;
      getsongs({ id: state.id, offset: state.offset }).then((res) => {
        //console.log(res);
        state.songs = res.data.songs;
        store.switchsongsheet(res.data.songs);
        //console.log(state.songs, "=1=");
      });
    });
    function subscribed(num) {
      if (num > 100000000) {
        return (num / 100000000).toFixed(1) + "亿";
      } else if (num > 10000) {
        return (num / 10000).toFixed(1) + "万";
      } else {
        return num;
      }
    }
    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        state.offset += 10;
        getsongs({ id: state.id, offset: state.offset }).then((res) => {
          //console.log(res, "----12");
          //console.log(state.songs, "12-=-=-=-56")
          // state.son = res.data.songs
          if (res.data.songs.length < 10) {
            state.finished = true;
            return;
            // finished.value = true;
          }
          for (let i = 0; i < 10; i++) {
            state.songs[state.songs.length] = res.data.songs[i];
          }
          // if (res.data.songs.length < 10) {
          //     state.loading = false;
          //     state.finished = true;
          // }

          //state.songs = { ...state.songs, ...res.data.songs }
          //console.log(state.songs, "123456")
        });
        //for (let i = 1; i < 10; i++) {
        //list.value.push(list.value.length + 1);
        //}

        // 加载状态结束
        // loading.value = false;
        state.loading = false;
        //state.finished = true;
        //console.log(state.son.length);
        // 数据全部加载完成
        // if (state.son.length < 10) {

        //     state.finished = true;
        // }

        // if (state.songs.length >= 20) {
        //     state.finished = true;
        //     //   finished.value = true;
        // }
      }, 1000);
    };
    function songdata(index) {
      store.getsongdata({
        songsheets: state.songs,
        id: state.songs[index].id,
        name: state.songs[index].name,
        songsindex: index,
      });
    }
    //console.log(state.songs, "123456789");
    //console.log(state.songs);
    //return { state, subscribed, onLoad, loading, finished }
    return { state, subscribed, onLoad, songdata };
  },
  props: ["playlist"],
};
</script>

<style lang="less" scoped>
.itemmusiclist {
  background-color: #fff;
  border-top-left-radius: 0.4rem;
  border-top-right-radius: 0.4rem;

  .itemmusiclist-top {
    height: 1rem;
    line-height: 1rem;

    .itemmusiclist-top-left-da {
      font-size: 0.4rem;
      float: left;
      font-weight: bold;
    }

    .itemmusiclist-top-left-xiao {
      font-size: 0.2rem;
      float: left;
      color: gray;
    }

    .itemmusiclist-top-right {
      width: 2.6rem;
      height: 0.8rem;
      background-color: red;
      border-radius: 0.5rem;
      margin-top: 0.1rem;

      //border-top-right-radius: 0.4rem;
      div {
        float: left;
      }

      .itemmusiclist-top-right-text {
        font-size: 0.3rem;
        float: left;
        line-height: 0.8rem;
        //Font-weight: bold;
      }
    }
  }

  .itemmusiclist-bottom {
    text-align: center;
    height: 1rem;
    overflow: hidden;
    padding: 0.1rem 0;
    // margin-bottom: 1rem;

    .itemmusiclist-bottom-index {
      line-height: 1rem;
      font-size: 0.4rem;
    }

    .itemmusiclist-bottom-song {
      font-size: 0.3rem;
      font-weight: bold;
      text-align: left;
      margin: 0.1rem 0;
      white-space: nowrap;
      overflow: hidden;
    }

    .itemmusiclist-bottom-name {
      font-size: 0.05rem;
      height: 0.4rem;
      text-align: left;
      overflow: hidden;
      margin: 0.1rem 0;
      white-space: nowrap;
    }
  }
}

.van-list__finished-text {
  height: 0.5rem;
}

.itemmusiclist-list {
  height: 5rem;
  overflow: auto;
}
</style>
